<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title>
        <link rel="stylesheet" type="text/css" href="./js/dijit/themes/tundra/tundra.css"/>
        <style type="text/css">
            input {
                height: 1.8em;
            }
        </style>
    </head>
    <body class="tundra">
        <div id="formDivContainer">
            <form id="formId">
                <input disabled="disabled" dojoType="dijit.form.Button" type="button" name="forBtn" value="commit"><input dojoType="dijit.form.CheckBox" checked="checked" name="checkbox" type="checkbox"><input dojoType="dijit.form.RadioButton" type="radio" name="radioButton"><input dojoType="dijit.form.TextBox" type="text">
                <textarea name="textAreaName" cols="50" rows="4" dojoType="dijit.form.SimpleTextarea" style="width:auto">
                </textarea>
                <br/>
                <input type="text" name="date1" id="date1" value="2009-12-30" dojoType="dijit.form.DateTextBox" required="true" />
                <br/>
                <label for="fromDate">
                    From:
                </label>
                <input id="fromDate" type="text" name="fromDate" dojoType="dijit.form.DateTextBox" required="true" onChange="dijit.byId('toDate').constraints.min = arguments[0];"/>
                <label for="toDate">
                    To:
                </label>
                <input id="toDate" type="text" name="toDate" dojoType="dijit.form.DateTextBox" required="true" onChange="dijit.byId('fromDate').constraints.max = arguments[0];"/>
                <br/>
                <label for="date1">
                    Drop down Date box. Click inside to display the calendar.
                </label>
                <label for="income1">
                    U.S. Dollars
                </label>
                <br/>
                <input type="text" name="income1" id="income1" value="54775.53" dojoType="dijit.form.CurrencyTextBox" required="true" constraints="{fractional:true}" currency="USD">
                <br/>
                <br/>
                <input dojoType="dijit.form.NumberSpinner" value="1000" smallDelta="10" constraints="{min:9,max:1550,places:0}" id="integerspinner2" name="someNumber"/>
                <br/>
                <input type="text" name="phone" id="phone" value="someTestString" dojoType="dijit.form.ValidationTextBox" regExp="[\w]+" required="true" invalidMessage="Invalid Non-Space Text.">
                <label for="phone">
                    Phone number, no spaces
                </label>
                <br/>
                <select dojoType="dijit.form.FilteringSelect" id="fruit" name="fruit">
                    <option value="cp" selected="selected">cp</option>
                    <option value="cpI">cpp</option>
                    <option value="cpII">cppp</option>
                </select>
                <input id="stateSelect"/>
            </form>
            </body>
        </html>
        <script src="./js/dojo/dojo.js" djConfig="parseOnLoad:false">
        </script>
        <script type="text/javascript">
            dojo.require("dojo.parser");
            dojo.require('dijit.form.Button');
            dojo.require('dijit.form.RadioButton');
            dojo.require('dijit.form.TextBox');
            dojo.require('dijit.form.CheckBox');
            dojo.require('dijit.form.SimpleTextarea');
            dojo.require('dijit.form.DateTextBox');
            dojo.require('dijit.form.CurrencyTextBox');
            dojo.require('dijit.form.NumberSpinner');
            dojo.require('dijit.form.ValidationTextBox');
            dojo.require('dijit.form.FilteringSelect');
            
            dojo.ready(function(){
            
                //dojo.parser.parse();
                
				/*
                var options = [{
                    AP: 'APPLE',
                    OR: 'ORANGE',
                    PE: 'PEAR'
                }];
                
                var selDom = dojo.byId('fruit');
                for (var i = 0; i < options.length; i++) {
                    for (var key in options[i]) {
                        var opt = dojo.create('option');
                        dojo.attr(opt, {
                            value: key
                        });
                        opt.innerHTML = options[i][key];
                        selDom.appendChild(opt);
                        console.log(selDom);
                    }
                } */
            });
            
            dojo.ready(function(){
                /*
                 * it's the best to perform the parse time, in case we'll manipulate the dom before doc ready
                 */
                dojo.parser.parse();
            });
        </script>
